<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes,minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <title>Document</title>
  <style>
    div{width:200px;height:200px;border:1px solid #000;margin:100px auto;text-align:center;line-height:200px;}
  </style>
 </head>
 <body>
   <div></div>
  <script>
    var div=document.querySelector("div"),
        divWidth=div.offsetWidth,
        divHeight=div.offsetHeight,
        arr=["左","上","上","右","右","下","下","左"];
    div.addEventListener("mouseover",function(evt){
      var rect=this.getBoundingClientRect(),
          x=evt.clientX,
          y=evt.clientY;
          div.innerHTML=arr[Math.floor(((Math.atan2(y-rect.top-divHeight/2,x-rect.left-divWidth/2)*180/Math.PI)+180)/45)];
    },false);
  </script>
 </body>
</html>